/**
 * Created by zhangyc on 2017/8/24.
 */
import React, { Component } from 'react';
import {bindActionCreators} from "redux";
import { connect } from 'react-redux';
import appAction from '../actions/appAction'
import Title from '../components/Title'

class App extends Component {

  onButtonClick = () => {
    const {actions} = this.props;
    actions.buttonClick('redux')
  }

  onTitleClick = () => {
    const {actions} = this.props;
    actions.buttonClick('Hello')
  }

  render() {
    return (
      <div>
        <Title {...this.props} onTitleClick={this.onTitleClick}/>
        <button onClick={this.onButtonClick}>click me</button>
      </div>
    );
  }
}

/*
 connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
 * 作用：连接 React 组件与 Redux store，没有connect的组件和redux是没有关系的:
 * mapStateToProps：如果定义该参数，组件将会监听 Redux store 的变化。
 * 任何时候，只要 Redux store 发生改变，mapStateToProps 函数就会被调用。
 * 该回调函数必须返回一个纯对象，这个对象会与组件的 props 合并。
 * mapDispatchToProps：声明好的action作为回调，也可以被注入到组件里，就是通过这个函数，它的参数是 dispatch，
 * 通过 redux 的辅助方法 bindActionCreator 绑定所有 action 以及参数的 dispatch，
 * 就可以作为属性在组件里面作为函数简单使用了，不需要手动 dispatch。
 */

export default connect(
  (state) => {
    return {
      text: state.appReducer.text
    }
  },
  (dispatch) => {
    return {
      //action 是需要 dispatch 来分发的，dispatch(action)是触发 state 变化的惟一途径
      //bindActionCreators 把 action creators 转成拥有同名 keys 的对象，但使用 dispatch 把每个 action creator 包围起来，这样可以直接调用它们。
      actions: bindActionCreators(Object.assign({}, appAction), dispatch)
    }
  }
)(App)
